import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { projectLabelView as projectDuck } from 'ducks'

class ImageListItem extends React.Component {
  render() {
    const { active, src, click } = this.props
    const action = active ? undefined : click
    const cname = active ? 'label-glrItem label-glrItem-active' : 'label-glrItem'
    return (
      <div className={cname} style={{ width: '75px', height: '75px' }}>
        <img
          style={{
            width: '64px',
            height: '64px',
            marginTop: '5px',
            marginLeft: '5px',
            borderRadius: '8px',
          }}
          src={src}
          onClick={action}
        />
      </div>
    )
  }
}

const ImageListView = ({ items, activeItemId, actionSetActiveItemId }) => (
  <div className="label-glrBarContainer" style={{ position: 'relative' }}>
    <div className="label-glrMainDiv label-glrImgTop" style={{ top: '0px', position: 'relative' }}>
      {items.map(item => (
        <ImageListItem
          key={item.id}
          src={`${item.item_object.dataset_object.file_server_object.address}/${
            item.item_object.metadata.thumb
          }`}
          active={activeItemId === item.id}
          click={() => actionSetActiveItemId(item.id)}
        />
      ))}
    </div>
  </div>
)

const propTypesShapeItems = PropTypes.shape({
  itemId: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  state: PropTypes.string.isRequired,
  thumb: PropTypes.string.isRequired,
})

ImageListView.propTypes = {
  items: PropTypes.arrayOf(propTypesShapeItems),
  activeItemId: PropTypes.string,
}

ImageListView.defaultProps = {
  activeItemId: undefined,
  items: undefined,
}

const mapStateToProps = state => ({
  items: projectDuck.selectors.pageItems(state),
  activeItemId: projectDuck.selectors.activeItemId(state),
})

const mapDispatchToProps = {
  actionSetActiveItemId: projectDuck.creators.actionSetActiveItemId,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(ImageListView)
